<template>
  <div class="container exchangeProduct" v-if="data">
    <div class="exchangeProduct-address">
      <div class="address-info">
        <div class="address-content">
          <div class="address-info-cell">
            <div class="address-info-hd">收货人:</div>
            <div class="address-info-bd">
              <span>{{data.consignee}}</span>
              <span>{{data.mobile}}</span>
            </div>
          </div>
          <div class="address-info-cell">
            <div class="address-info-hd">收货地址:</div>
            <div class="address-info-bd">{{data.address_info}}</div>
          </div>
        </div>
        <!-- <van-icon name="arrow" size="16px" color="#D8D8D8" /> -->
      </div>
    </div>
    <div class="ant-cells">
      <span class="order-sn">订单编号：{{data.order_sn}}</span>
      <div class="ant-cell">
        <div class="ant-product">
          <div class="ant-product-pic">
            <img mode="widthFix" :src="data.goods_info.image_url" />
          </div>
          <div class="ant-product-info">
            <div class="ant-product-header">
              <p class="ant-product-name">{{data.goods_info.goods_name}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="ant-cell">
        <div class="ant-cell-hd">运费</div>
        <div class="ant-cell-bd ant-cell-default"></div>
        <div class="ant-cell-ft">￥ {{data.goods_info.shipping_price}}</div>
      </div>
      <div class="ant-cell">
        <div class="ant-cell-hd">兑换积分</div>
        <div class="ant-cell-bd ant-cell-default"></div>
        <div class="ant-cell-ft pro">{{data.goods_info.points_number}}积分</div>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import AntIntegralProduct from '@/components/integralProduct'
  import request from "@/api/request";
  import {
    getCollects,
    cancelCollect
  } from '@/utils/index'
  export default {
    components: {
      AntIntegralProduct
    },
    data() {
      return {
        data: null,
      };
    },
    computed: {},
    methods: {},
    mounted() {
      // this.getPointsGoodsLists();
      request
        .pointsOrderDetail({
          order_id: this.$route.query.order_id
        })
        .then(res => {
          this.data = res.data.detail;
        });
    }
  };

</script>

<style lang="less">
  .exchangeProduct-address {
    background: #fff;
    padding: 15px;

    .select-address {
      font-size: 14px;
      color: #606060;
      display: flex;
      align-items: center;
      justify-content: space-between;

      ._van-icon {
        width: 16px;
        height: 16px;
      }
    }

    .address-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .address-content {
        flex: 1;
      }

      ._van-icon {
        width: 16px;
        height: 16px;
      }

      .address-info-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
      }

      .address-info-hd {
        color: #A0A0A0;
        font-size: 14px;
        width: 70px;
      }

      .address-info-bd {
        flex: 1;
        font-size: 14px;
        color: #606060;
        display: flex;
        align-items: center;
        justify-content: space-between;

      }
    }
  }

  .address-info {}

  .ant-product {
    font-size: 0;
    display: flex;
    padding: 0 15px;
    margin-bottom: 10px;

    .ant-product-pic {
      width: 82px;
      height: 82px;
      margin-right: 12px;
      background: #F9F9F9;
      border-radius: 5px;

      img {
        width: 82px;
        height: 82px;
      }
    }

    .ant-product-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-product-header {
        padding-bottom: 5px;

        .ant-product-name {
          font-size: 14px;
          color: rgba(96, 96, 96, 1);
          line-height: 18px;
        }
      }

      .ant-product-body {
        display: flex;
        flex-direction: column;
        flex: 1;

        p {
          font-size: 12px;
          color: rgba(160, 160, 160, 1);
          line-height: 18px;
        }
      }

      .ant-product-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .ant-product-price {
        font-size: 15px;
        color: rgba(238, 117, 89, 1);
        line-height: 15px;
      }

      .ant-product-controller {
        width: auto;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;

        .ant-product-controller-icon {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .ant-cells {
    margin-top: 10px;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(.5);
      transform: scale(.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      border: 0 solid #eee
    }

    .order-sn {
      position: relative;
      padding: 0 15px;
      background: #fff;
      line-height: 34px;
      font-size: 12px;
      color: #606060;
      display: block;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #e9eaec;
        border-bottom-width: 1px;
      }
    }
  }

  .ant-cell {
    display: flex;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    line-height: 24px;
    position: relative;
    background-color: #fff;
    color: #333;
    font-size: 14px;

    .ant-product {
      font-size: 0;
      padding: 0;
      margin-bottom: 0px;
    }

    &::after {
      content: '';
      position: absolute;
      left: 15px;
      right: 0;
      bottom: 0;
      width: auto;
      transform: scale(1, .5);
      border-bottom-width: 1px;
      border-bottom-color: #eee;
      z-index: 10;
    }

  }

  .ant-cell-hd {}

  .ant-cell-bd {}

  .ant-cell-ft {}

  .ant-cell-default {
    flex: 1;
  }

  .pro {
    color: #EE7559;
  }

</style>
